import React, { Component } from 'react';
import {
    View,
    Text,
    TextInput,
    Button,
    TouchableOpacity,
    StyleSheet
} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
import WXStyle from '../utils/style/wxstyle';
import Style from '../utils/style/style';
export default class SearchInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputShowed: false,
            inputVal: ''
        }
    };
    _showInput() {
        this.setState({
            inputShowed: true
        });
    }
    _hideInput() {
        this.setState({
            inputVal: "",
            inputShowed: false
        });
        // var myEventDetail = this.data.inputVal // detail对象，提供给事件监听函数
        // this.triggerEvent('search', myEventDetail)
    }
    _clearInput() {
        this.setState({
            inputVal: ""
        });
        this.props.search(this.state.inputVal)
    }

    _inputConfirm() {
        this.props.search(this.state.inputVal)
    }

    render() {
        return (
            <View style={WXStyle.weuiSearchBar}>
                <View style={WXStyle.weuiSearchBarForm}>
                    <View style={WXStyle.weuiSearchBarBox}>
                        <View style={[WXStyle.weuiIconSearchInBox]}><Icon name="search" size={14}></Icon></View>
                        <TextInput
                            underlineColorAndroid="transparent"
                            style={WXStyle.weuiSearchBarInput}
                            placeholder="搜索" value={this.state.inputVal}
                            onChangeText={(text) => this.setState({ inputVal: text.replace(/\s/g, '') })}
                            onSubmitEditing={() => this._inputConfirm()}
                        />
                        {this.state.inputVal.length > 0 ?
                            <TouchableOpacity onPress={() => this._clearInput()} >
                                <Icon name="times-circle" size={16} style={styles.delete}></Icon>
                            </TouchableOpacity>
                            : null
                        }
                    </View>
                    {
                        this.state.inputShowed ? null :
                            <TouchableOpacity style={[WXStyle.weuiSearchBarLabel]} onPress={() => this._showInput()} activeOpacity={1}>
                                <View style={[Style.dfr, Style.jsc, Style.aic, styles.searchLabel]}>
                                    <Icon name="search" size={14}></Icon>
                                    <Text style={[WXStyle.searchText]}>搜索</Text>
                                </View>
                            </TouchableOpacity>
                    }
                </View>
                {
                    this.state.inputShowed ? <TouchableOpacity style={WXStyle.weuiSearchBarCancelBtn} onPress={() => this._hideInput()}><Text style={{ color: WXStyle.mainColor }}>取消</Text></TouchableOpacity> : null
                }
            </View>
        )
    }
}
const styles = StyleSheet.create({
    searchLabel: {
        height: 28
    },
    delete:{
        paddingRight:8,
        paddingLeft:5
    }
    
})